<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="lableList"
      style="width: 100%"
      :default-sort="{ prop: 'date', order: 'descending' }"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" align="center" width="55"> </el-table-column>
      <el-table-column prop="lableId" fixed="left" align="center" label="图片ID" sortable>
      </el-table-column>
      <el-table-column prop="lableName" align="center" label="图片名称" sortable>
      </el-table-column>
      <el-table-column align="center" label="是否可用" >
        <template slot-scope="scope">
          <el-tag v-if="!scope.row.isUse" type="success">正在使用</el-tag>
          <el-tag v-else type="danger">已经禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建时间" >
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
          {{ scope.row.gmtCreate }}</template
        >
      </el-table-column>
      <el-table-column align="center" width="300" fixed="right">
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="lableName"
            size="mini"
            @keyup.enter.native="handleSearch(scope)"
            placeholder="输入关键字搜索"
          />
        </template>
        <template slot-scope="scope" align="center">
          <el-button
            width="100"
            size="mini"
            @click="handleEdit(scope.$index, scope.row.lableId)"
            >编辑</el-button
          >
          <el-button
            width="100"
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row.lableId)"
            >删除</el-button
          >
          <el-button
            v-if="scope.row.isUse"
            width="100"
            size="mini"
            type="success"
            @click="handleUnForbid(scope.$index, scope.row.lableId)"
            >解封</el-button
          >
          <el-button
            v-else
            width="100"
            size="mini"
            type="danger"
            @click="handleForbid(scope.$index, scope.row.lableId)"
            >禁用</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-button @click="deleteSelect()">删除选中</el-button>
      <el-button @click="toggleSelection()">取消选择</el-button>
    </div>
    <el-pagination
      :current-page="current"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center"
      layout="total, prev, pager, next, jumper"
      @current-change="getLablePage"
    />
  </div>
</template>

<script>
import lable from "@/api/label";


export default {
  data() {
    return {
      lableList: [],
      lableName: '',
      lableQuery: {},
      ids: [],
      previewSrcList: [],
      current: 1, //页码
      limit: 4, //每页多少行
      total: 0 ,//总记录数,
      multipleSelection: [],
      label: ""
    };
  },
  created() {
    this.getLablePage();
  },
  methods: {
    // 分页获取所有轮播图
    getLablePage(current = 1) {
      this.current = current
      lable.getLablePageVo(this.current, this.limit).then( res => {
        this.previewSrcList = []
        this.lableList = res.data.lableList;
        this.total = res.data.total;
        this.lableList.forEach((lable) => {
        this.previewSrcList.push(lable.lableUrl)
        })
      })
    },

    getLablePageQuery(current = 1) {
      this.current = current
      console.log(this.lableQuery)
      lable.getLablePageQueryVo(this.current, this.limit, this.lableQuery).then(res => {
          this.previewSrcList = []
          this.lableList = res.data.lableList;
          this.total = res.data.total;
          this.lableList.forEach((lable) => {
          this.previewSrcList.push(lable.lableUrl)
        })
      });
    },
    // 获取所有轮播图
    getAll() {
      lable.getAllLable().then((res) => {
        console.log(res.data);
        this.previewSrcList = []
        this.lableList = res.data.lableList
      });
    },
    // 反选和取消
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },

    // 批量删除
    deleteSelect() {
      this.ids = this.ids.sort((a, b) => a - b)
      this.$confirm("此操作将永久删除这些轮播图, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          lable.deleteAllSelect(this.ids).then((res) => {
            if (res.success) {
              if ( res.data.error_msg === "" || res.data.error_msg === undefined ) {
                this.getLablePageQuery();
                this.$message({
                  message: "删除成功",
                  type: "success",
                });
              } else {
                this.$message({
                  message: '请先删除带有该标签的拍摄地点',
                  type: 'info'
                })
              }
            } else {
              this.$message({
                message: "出现故障,请稍后",
                type: "failure",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    formatter(row, column) {
      return row.address;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.ids = val.map( res => {
        return res.lableId
      });
    },

    // 跳转编辑或添加页面
    handleEdit(index, row) {
      this.$router.push({ path: "/label/add", query: { id: row } });
    },

    // 删除单个
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该图片, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          lable.deleteOneById(row).then((res) => {
            if (res.success) {
              if ( res.data.error_msg === "" || res.data.error_msg === undefined ) {
                this.getLablePageQuery();
                this.$message({
                  message: "删除成功",
                  type: "success",
                });
              } else {
                this.$message({
                  message: '请先删除带有该标签的拍摄地点',
                  type: 'info'
                })
              }
            } else {
              this.$message({
                message: "出现故障,请稍后",
                type: "failure",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSearch(scope) {
      this.lableQuery.lableName = this.lableName
      if (this.lableName.length > 0) {
        this.getLablePageQuery()
      } else {
        this.getLablePage();
        this.$message({
          message: "您的搜索为空,搜索全部内容",
          type: "info",
        });
      }
      this.lableName = ''
      // this.lableQuery.lableName = ''
    },
    handleForbid(index, row) {
      this.$confirm('此操作将禁用该标签, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        lable.forbid(row).then( res => {
          if ( res.data.error_msg === "" || res.data.error_msg === undefined ) {
          this.getLablePageQuery()
          this.$message({
            type: 'success',
            message: '禁用成功!'
          })
          } else {
            this.$message({
              message: '请先删除带有该标签的拍摄地点',
              type: 'info'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消禁用'
        })
      })
    },
    handleUnForbid(index, row) {
      this.$confirm('此操作将解封该标签, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        lable.unForbid(row).then( res => {
          if ( res.success ) {
            this.getLablePageQuery()
            this.$message({
              type: 'success',
              message: '解封成功!'
            })
          } else {
            this.$message({
              message: "出现故障,请稍后",
              type: "failure",
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消解封'
        })
      })
    }
  }
}
</script>

<style>
</style>
